<template>
	<view class="xinxifabu">
		<!-- 个人信息 -->
		<view class="neirong">
			<view class="block1 shadow margin_top mainpadding">
				<view class="flexleft">
					<view class="titletext minwidth">发布到</view>
					<view class="bighuisetext">{{xqname || "本校区"}}</view>
				</view>
				<view class="flexleft margin_top">
					<view class="titletext minwidth">分类</view>
					<view class="bighuisetext">{{fenleitext}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="flexleft">
						<view class="hongsex">*</view>
						<view class="titletext">联系人</view>
					</view>
					<input type="text" class="inputs mainpadding qishi" placeholder="请输入联系人" v-model="lxr">
				</view>
				<view class="flexleft margin_top">
					<view class="flexleft margin_right3">
						<view class="hongsex">*</view>
						<view class="titletext">联系方式</view>
					</view>
					<view class="flexleft">
						<view :class="fenlei=='mobile'?'lvxiaobtn margin_right3':'margin_right3 huisebtn'"
							@click="typelx('mobile')">手机</view>
						<view :class="fenlei=='weixin'?'lvxiaobtn margin_right3':'margin_right3 huisebtn'"
							@click="typelx('weixin')">微信</view>
						<view :class="fenlei=='qq'?'lvxiaobtn':'huisebtn'" @click="typelx('qq')">QQ</view>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="flexleft">
						<view class="hongsex">*</view>
						<view class="titletext" v-show="fenlei=='mobile'">手机号</view>
						<view class="titletext" v-show="fenlei=='weixin'">微信号</view>
						<view class="titletext" v-show="fenlei=='qq'">QQ号</view>
					</view>
					<input type="text" v-show="fenlei=='mobile'" class="inputs mainpadding qishi" placeholder="请输入联系方式" v-model="sjh">
					<input type="text" v-show="fenlei=='weixin'" class="inputs mainpadding qishi" placeholder="请输入微信号" v-model="wxh">
					<input type="text" v-show="fenlei=='qq'" class="inputs mainpadding qishi" placeholder="请输入QQ号" v-model="qqh">
				</view>
			</view>
			<view class="block2 mainpadding ">
				<view class="biankuang radius">
					<view class="flexbetween xiabiank mainpadding">
						<view class="flexleft">
							<view class="hongsex">*</view>
							<view class="titletext">标题</view>
						</view>
						<input type="text" class=" baifenbai" placeholder="请输入标题" v-model="biaoti">
					</view>
					<textarea class="mainpadding textareas" maxlength="200" placeholder="请输入物品描述，请勿填写违反学校规定、涉嫌违法信息" v-model="miaoshi"></textarea>
				</view>
			</view>
			<!-- <view class="block3 mainpadding">
				<view class="flexleft">
					<view class="hongsex">*</view>
					<view class="titletext">描述</view>
				</view>
				<textarea class="textareas mainpadding radius margin_top" cols="30" rows="10" v-model="miaoshi"
					placeholder="请输入物品描述，请勿填写违反学校规定、涉嫌违法信息"></textarea>
			</view> -->
			<view class="block4 mainpadding">
				<view class="titletext">上传图片</view>
				<view class="flexleft mainpadding2">
					<view class="tupianbox flexcenter margin_top" v-for="(item,index) in upImg" :key="index">
						<view class="tupian radius">
							<image class="radius upimage" :src="item" mode=""></image>
							<image class="shanchu" src="../../static/image/system/shanchu.png" @click="deleimgae(index)"
								mode=""></image>
						</view>
					</view>
					<view class="tupianbox flexcenter margin_top" @click="uploadImg" v-if="upImg.length>=3?false:true">
						<view class="tupian shangchuan radius">
							<image src="../../static/image/system/shangchuan.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="dibuboxs" @click="fufeifb" v-if="price > 0">
			<view class="dibubtn">付费发布</view>
		</view>
		<view class="dibuboxs" @click="xinxifb" v-else>
			<view class="dibubtn">信息发布</view>
		</view>
		<!-- 固定内容 -->
		<replacebtn :info="{replace:false,news:false,jishi:true}"></replacebtn>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				fenleiid: "",
				xqid: "",
				// 联系人
				lxr: "",
				// 联系方式
				fenlei: "mobile", //mobile:手机，qq:QQ,weixin:微信
				sjh: "", //手机号
				wxh:"",
				qqh:"",
				biaoti: "", //标题
				miaoshi: "", //内容
				upImg: [],
				wodelibiao: {},
				fenleitext:"",
				xqname:"",
				price:'',
				state:'',
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			console.log(data);
			this.fenleiid = data.id
			this.xqid = data.xqid
			this.fenleitext = data.fenleitext
			this.price = data.price
			if(data.xqname){
				this.xqname = data.xqname
			}
			this.getinfo()
		},
		methods: {
			getinfo() {
				httpRequest.request('user/index', 'POST', {}, false, false, true).then(res => {
					console.log(res);
					console.log(res.data.userinfo.state)
					let state = res.data.userinfo.state
					this.lxr = res.data.userinfo.nickname
					this.sjh = res.data.userinfo.mobile
					this.wxh = res.data.userinfo.certification.weixin
					this.qqh = res.data.userinfo.certification.qq
				})
			},
			// 删除图片
			deleimgae(index) {
				this.upImg.splice(index, 1)
			},
			// 上传图片
			uploadImg() {
				let _this = this;
				let upImgs = _this.upImg;
				let num = 6 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], _this.upImg)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i], _this.upImg)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, upImg) {
				// console.log(url,888)
				let _this = this;
				httpRequest.uploadFile('common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(image_item);
				}).catch(err => {});
			},
			isPhone(phone){
				if(!(/^1[3456789]\d{9}$/.test(phone))){ 
					return false; 
				}
			},
			fufeifb(){
				console.log("发布")
				if (this.fenleiid == "") {
					httpRequest.toast("请输入联系人")
					return false
				}
				if (this.sjh == "" && this.wxh == "" && this.qqh == "") {
					httpRequest.toast("请输入联系方式")
					return false
				}
				if(this.fenlei == 'mobile' && this.isPhone(this.sjh) == false){
					httpRequest.toast("请输入正确的手机号")
					return false
				}
				if (this.biaoti == "") {
					httpRequest.toast("请输入标题")
					return false
				}
				if (this.miaoshi == "") {
					httpRequest.toast("请输入描述内容")
					return false
				}
				let arr = []
				if(this.sjh != ""){
					arr.push("mobile")
				}
				if(this.wxh != ""){
					arr.push("weixin")
				}
				if(this.qqh != ""){
					arr.push("qq")
				}
				httpRequest.request('forum/add_other', 'POST', {
					topic_id: this.fenleiid, //分类id
					school_id: this.xqid, //校区id
					username: this.lxr, //联系人
					type: arr.join(), //联系方式
					mobile:this.sjh,
					qq:this.qqh,
					weixin:this.wxh,
					name: this.biaoti, //标题
					content: this.miaoshi, //内容
					images: this.upImg //图片
				}).then(res => {
					if(res.code==0){
						httpRequest.toast(res.msg)
					}else if(res.code==1){
						this.pay(res)
					}
				})
			},
			// 信息发布
			xinxifb() {
				console.log("发布")
				if (this.fenleiid == "") {
					httpRequest.toast("请输入联系人")
					return false
				}
				if (this.sjh == "" && this.wxh == "" && this.qqh == "") {
					httpRequest.toast("请输入联系方式")
					return false
				}
				if(this.fenlei == 'mobile' && this.isPhone(this.sjh) == false){
					httpRequest.toast("请输入正确的手机号")
					return false
				}
				if (this.biaoti == "") {
					httpRequest.toast("请输入标题")
					return false
				}
				if (this.miaoshi == "") {
					httpRequest.toast("请输入描述内容")
					return false
				}
				// uni.showLoading({
				// 	title: '请等待...'
				// })
				// this.btnflag = false
				let arr = []
				if(this.sjh != ""){
					arr.push("mobile")
				}
				if(this.wxh != ""){
					arr.push("weixin")
				}
				if(this.qqh != ""){
					arr.push("qq")
				}
				uni.showLoading({
					title:'发布中'
				})
				if (this.xqid == "") {
					httpRequest.request('forum/add', 'POST', {
						topic_id: this.fenleiid, //分类id
						username: this.lxr, //联系人
						type: arr.join(), //联系方式
						mobile:this.sjh,
						qq:this.qqh,
						weixin:this.wxh,
						name: this.biaoti, //标题
						content: this.miaoshi, //内容
						images: this.upImg //图片
					}).then(res => {
						// 返回上一页
						// uni.hideLoading();
						if (res.code == 1) {
							uni.hideLoading();
							setTimeout(function(){
								httpRequest.toast(res.msg)
							},300)
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}else{
							// httpRequest.toast(res.msg)
							if(this.state != 2){
								uni.hideLoading();
								uni.showModal({
									title:'校园认证',
									content:'您还未进行校园认证，是否立刻进行认证?',
									success(res) {
										if(res.confirm){
											uni.navigateTo({
												url:'/pages/wode/shenfenyz'
											})
										}
									}
								})
							}
						}
					})
				} else {
					httpRequest.request('forum/add_other', 'POST', {
						topic_id: this.fenleiid, //分类id
						school_id: this.xqid, //校区id
						username: this.lxr, //联系人
						type: arr.join(), //联系方式
						contact: {
							mobile:this.sjh,
							qq:this.qqh,
							weixin:this.wxh
						}, //联系信息
						name: this.biaoti, //标题
						content: this.miaoshi, //内容
						images: this.upImg //图片
					}).then(res => {
						if(res.code==0){
							httpRequest.toast(res.msg)
						}else if(res.code==1){
							this.pay(res)
						}
					})
				}

			},
			// 支付
			pay(res) {
				httpRequest.request('pay/pay', 'POST', {
					type: 1,
					order_id: res.data.id,
					platform: "wxpublic"
				}, false, false, true).then(res => {
					// uni.hideLoading();
					this.hpay(res.data)
				})
			},
			// 支付
			hpay(data) {
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
					"appId": data.appId, //公众号ID，由商户传入    
					"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数    
					"nonceStr": data.nonceStr, //随机串    
					"package": data.package,
					"signType": data.signType, //微信签名方式：    
					"paySign": data.paySign //微信签名
				}, function(res) {
					//android：支付成功、支付失败、取消支付  都能执行这个回调
					//ios：支付失败、取消支付  能执行这个回调， 支付成功不执行这个回调
					// alert('支付结果：' + res.err_msg);
					if (res.err_msg == "get_brand_wcpay_request:ok") {
						// 使用以上方式判断前端返回,微信团队郑重提示：
						//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						// alert('支付成功！');
						httpRequest.toast("发布成功，等待系统审核")
						setTimeout(function() {
							uni.navigateBack({
								delta: 5
							})
						}, 500)
					}
					if (res.err_msg == "get_brand_wcpay_request:cancel") {
						// alert('你已经取消支付了！');
					}
					if (res.err_msg == "get_brand_wcpay_request:fail") {
						// alert('支付失败了！');
					}
				});
			},
			// 联系方式切换
			typelx(e) {
				this.fenlei = e
			}
		}
	}
</script>
<style lang="scss" scoped>
	.xiabiank{
		border-bottom: 1rpx solid #EBEBEB;
	}
	.biankuang {
		border: 1rpx solid #999999;
	}

	.minwidth {
		width: 23%;
	}

	.bighuisetext {
		font-size: 30rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.block4 {
		padding-bottom: 50rpx;
	}

	// 固定内容
	.jishitupian {
		margin: auto;
		width: 43rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.gudingbox {
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
		background: rgba(42, 204, 156, .8);
	}

	.fabutupian {
		width: 43rpx;
		margin: auto;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.baisetext {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.neirong {
		padding-bottom: 140rpx;
	}

	.flexleft {
		flex-wrap: wrap;
	}

	.shangchuan {
		width: 175rpx;
		height: 183rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tupianbox {
		// margin-right: 30rpx;
		width: 33.33%;
	}

	.tupian {
		position: relative;
		width: 175rpx;
		height: 183rpx;

		.upimage {
			width: 100%;
			height: 100%;
		}
	}

	.shanchu {
		width: 31rpx;
		height: 30rpx;
		position: absolute;
		left: 45%;
		bottom: -7%;
	}

	.textareas {
		width: 91%;
	}

	.baifenbai {
		width: 73%;
	}

	.huisebtn {
		width: 104rpx;
		height: 49rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #999999;
		background: rgba(153, 153, 153, .2);
	}

	.lvxiaobtn {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #2ACC9C;
		width: 104rpx;
		height: 49rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(42, 204, 156, .2);
		border-radius: 10rpx;
	}

	.qishi {
		width: 68.5%;
	}

	.inputs {
		border: 1rpx solid #999999;
		border-radius: 20rpx;
	}

	.hongsex {
		color: #FF0000;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
	}
</style>
